<template>
	<div class="app-container">
		<div class="upStream2">
			<div class="up-top">
				<el-steps :active="2" finish-status="end" process-status='curt' class="nextnav"  simple>
				  <el-step title="导入文件" icon="iconfont icon-1" ></el-step>
				  <el-step title="批单校验" icon="iconfont icon-2"></el-step>
				  <el-step title="结算完成" icon="iconfont icon-3"></el-step>
				</el-steps>
			</div>
			<div class="up-info">
				<!-- <p class="info-p1">保险公司：{{insuranceName}}</p> -->
				<p class="info-p1">保险公司：{{compomay}}</p>
			</div>
			<div class="up-list">
				<div class="list-table">
					<el-table :data="tableData" style="width: 100%" :stripe='true' v-loading='loading'>
						 <el-table-column  width='60'>
						 	<template slot-scope='scope'>
						 		<span v-if='scope.row.guaranteeSlipType == 1' class="edspan1">商</span>
						 		<span v-if='scope.row.guaranteeSlipType == 2' class="edspan2">交</span>
						 	</template>
						 </el-table-column>
						 <el-table-column  label='批单信息' width='250'>
						 	<template slot-scope='scope'>
						 		<p class="info-p1">
							 		<span class=""  v-if='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
							 		<span v-if='!scope.row.guaranteeSlipNumber'>-</span>
							 		<!-- <span v-if='scope.row.insuranceName'>{{scope.row.insuranceName}}</span>
							 		<span v-if='!scope.row.insuranceName'>-</span> -->
						 		</p>
						 		<p class="info-p2">
							 		<span v-if='scope.row.plateNumber'>{{scope.row.plateNumber}}</span>
							 		<span v-if='!scope.row.plateNumber'>-</span>
							 		<!--<span v-if='scope.row.applicantName.length<=6'>{{scope.row.applicantName}}</span>
							 		<el-tooltip v-if='scope.row.applicantName.length>6' class="item" effect="light" :content="scope.row.applicantName" placement="bottom">
								      <span style="cursor: pointer;">{{scope.row.applicantName | sixCon}}</span>
								    </el-tooltip>-->
								    <span v-if='scope.row.customerName'>{{scope.row.customerName}}</span>
							 		<span v-if='!scope.row.customerName'>-</span>
						 		</p>
                                <p class="info-p3">
                                    <span>原保单：</span>
                                    <span class="lineG" @click='toG(scope.row.oldGuaranteeSlipId)' v-if='scope.row.guaranteeSlipNumber'>{{scope.row.guaranteeSlipNumber}}</span>
							 		<span v-if='!scope.row.guaranteeSlipNumber'>-</span>
                                </p>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="业务归属" align='center'>
						 	<template slot-scope='scope'>
						 		<el-tooltip class="item" effect="light" :content="scope.row.displayName" placement="bottom">
								     <p class="Businessownership">
								     	<span class="info-p1" v-if='scope.row.displayName'>{{scope.row.displayName | lastname}}</span>
								 		<span class="info-p1" v-else>-</span>
								 		 <span class="info-p2" v-if='scope.row.name'>({{scope.row.name}})</span>
								 		 <span class="info-p2" v-else></span>
								     </p>
								   </el-tooltip>
						 		
						 	</template>
						 </el-table-column>
						 <el-table-column label="批改保费" width='120' align='right'>
						 	<template slot-scope='scope'>
						 		<span class='setFont' v-if='scope.row.correctPremium != 0'>{{scope.row.correctPremium | numFilter}}</span>
						 		<span class='setFont' v-if='scope.row.correctPremium == 0'>0.00</span>
						 		<span class='setFont' v-if='scope.row.correctPremium == null'>-</span>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="批改后保费" width='120' align='right'>
						 	<template slot-scope='scope'>
						 		<span class='setFont' v-if='scope.row.afterCorrectPremium != 0'>{{scope.row.afterCorrectPremium | numFilter}}</span>
						 		<span class='setFont' v-if='scope.row.afterCorrectPremium == 0'>0.00</span>
						 		<span class='setFont' v-if='scope.row.afterCorrectPremium == null'>-</span>
						 	</template>
						 </el-table-column>
						 <el-table-column  label="批改净保费" width='120' align='right'>
						 	<template slot-scope='scope'>
						 		<span class='setFont' v-if='scope.row.correctNetPremium  != 0'>{{scope.row.correctNetPremium  | numFilter}}</span>
						 		<span class='setFont' v-if='scope.row.correctNetPremium  == 0'>0.00</span>
						 		<span class='setFont' v-if='scope.row.correctNetPremium  == null'>-</span>
						 	</template>
						 </el-table-column>
                          <el-table-column  label="批单时间" width='120' align='center'>
						 	<template slot-scope='scope'>
						 		<span class='setFont'> {{scope.row.correctDatetime | times}}</span>
						 		
						 	</template>
						 </el-table-column>
						 <el-table-column  label="结算费用" width='120' align='right'>
						 	<template slot-scope='scope'>
                                <span class='setFont' v-if='scope.row.correntSettlementPremium != 0'>{{scope.row.correntSettlementPremium | numFilter}}</span>
						 		<span class='setFont' v-if='scope.row.correntSettlementPremium == 0'>0.00</span>
						 		<span class='setFont' v-if='scope.row.correntSettlementPremium == null'>-</span>
						 	</template>
						 </el-table-column>
						<el-table-column  label="是否结算" width='100' align='center'>
						 	<template slot-scope='scope'>
                                <el-switch
								  v-model="scope.row.isSettlement"
								 	@change="changeSettlement(scope.row.id)"
								 	active-color="#87D068"
                           			inactive-color="#CCCCCC" 
								  >
								  
								</el-switch>
						 	</template>
						 </el-table-column>
						<el-table-column  label="操作" width='80' type='index' align="center">
						 	<template slot-scope='scope'>
                                 <span class="acolor" @click="openRemark(scope.row)">备注</span>&nbsp;&nbsp;
                                <!-- <span class="bcolor" @click="del(scope.row.id)">删除</span>-->
						 	</template>
						 </el-table-column>
					</el-table>
				</div>
				<div class="list-page">
					<el-pagination @current-change="handleCurrentChange" :current-page='currentPage' background :page-size="pagesizes" layout="total,prev, pager, next" :total="pagetotal"></el-pagination>
				</div>
			</div>
			<div class="up-btn">
				<el-button size='small' class='wd100' @click='toupstep()'>上一步</el-button>
				<el-button size='small' type='primary' class='wd100' @click='tosettle()' v-if='btnShow' :loading='isloading'>结算</el-button>
				<el-dialog title="确认" :visible.sync="dialogVisible" width='500px' :close-on-click-modal='false'>
				  <p style="text-align: left;margin-top:0;">请确认以下结算信息是否正确：</p>
				  <table class="settletable" border="1" cellpadding="6" cellspacing="0">
				  	<tr>
				  		<td width="34%"></td>
				  		<td width="33%">条数</td>
				  		<td width="33%">结算金额</td>
				  	</tr>
				  	<tr>
				  		<td style="text-align:left;">导入批单</td>
				  		<td>{{settleTableData.totalCount}}</td>
				  		<td>{{settleTableData.settlementAmount | numFilter}}</td>
				  	</tr>
				  </table>
				  <div>
					  <el-button size='mini' class='wd120' @click='dialogVisible = false'>暂不结算</el-button>
					  <el-button size='mini' type='primary' class='wd120' @click='upsettle()'>正确，马上结算</el-button>
				  </div>
				</el-dialog>
			</div>

            <el-dialog title="备注" :visible.sync="remarkDialog" width='500px' :close-on-click-modal='false'>
                <el-form label-width="100px" :rules="rules" :model="formLabel"  ref="formLabel">
                    <el-form-item label="批单号">
                       {{formLabel.gid}}
                    </el-form-item>
                    <el-form-item label="结算备注" prop="remark" style="width:400px;">
                        <el-input placeholder="请输入该保单号的结算备注" size="mini" v-model="formLabel.remark"></el-input>
                    </el-form-item>
                    <div style="text-align:center;">
                    <el-button size="mini" type="info" @click="quitRe()">取消</el-button>
                    <el-button size="mini" type="primary" @click="saveremark()">保存</el-button>
                    </div>
                </el-form>
            </el-dialog>
		</div>
	</div>
</template>
<script>
import Vue from "vue"
	export default{
		data(){
			return{
				value2:false,
				id:'',
				insuranceId:"",
				compomay:"",
				isloading: false,
				visible2:false,
				pagesizes:3,
				tableData:[],
				currentPage:1,
				pagetotal:null,
				rowId:null,
				isSettlement:null,
        		dialogVisible:false,
        		settleTableData:{},
        		noSettleCount:0,
        		settleCount:0,
        		guaranteeslipAllCount:0,
        		totalCost:0,
        		actionTotalCost:0,
        		guaranteeslipAllCount:0,
        		settleCount:0,
        		noSettleCount:0,
        		btnShow:true,
                loading:false,
                remarkDialog:false,
                formLabel:{
                    gid:null,
                    remark:'',
                    id:''
                },
                rules:{
                    remark: [{
						required: true,
						message: '请填写备注',
						trigger: 'blur'
					}],
                }
			}
		},
		mounted(){
			console.log(this.$route.query)
			if(this.$route.query.id){
				this.id = this.$route.query.id;
				this.insuranceId=this.$route.query.insuranceId
			}
			if(this.$route.query.pageindex){
				this.currentPage=parseFloat(this.$route.query.pageindex)
				this.id=this.$route.query.batchId
                this.insuranceId=this.$route.query.insuranceId,
				this.getList(this.$route.query.pageindex);
			}else{
				this.getList();
			}
			
			// this.getDetail();
		},
		filters:{
			times(val){
				if(val){
					return val.split(" ")[0]
				}
			},
			lastname(val){
				let arr=val.split("-")
				return arr[arr.length-1]
			},
			numFilter(val) {
		    // 截取当前数据到小数点后两位
		    // let realVal = Number(val).toFixed(2)
		    // num.toFixed(2)获取的是字符串
		    // return Number(realVal)
		    if(val || val == 0){
		    	val = val.toString().replace(/\$|\,/g,'');
			    if(isNaN(val)) {
			      val = "0";  
			    }
			    let sign = (val == (val = Math.abs(val)));
			    val = Math.floor(val*100+0.50000000001);
			    let cents = val%100;
			    val = Math.floor(val/100).toString();
			    if(cents<10) {
			       cents = "0" + cents
			    }
			    for (var i = 0; i < Math.floor((val.length-(1+i))/3); i++) {
			        val = val.substring(0,val.length-(4*i+3))+',' + val.substring(val.length-(4*i+3));
			    }

			    return (((sign)?'':'-') + val + '.' + cents);
		    }
		  },
		  lastname(val) { 
		       let  index = val.lastIndexOf('-')
		       if(index !== '-1'){
		         let sli = val.substr(index+1,val.length)
		         return sli
		       }
		  },
		  sixCon(val){
		  	let aa = val;
		  	if(val.length > 6){
		  		aa = val.substr(0,6)+'...';
		  	}
		  	return aa;
		  }
		},
		methods:{
			changeSettlement(val){
				console.log(val)
				let params={
					id:val
				}
				this.post(params,'services/app/correctGuaranteeSlip/CorrectUpdateIsSettment_Upper').then(res=>{
					if(res.success){
						console.log(res)
					}else{
						this.$notify.error({
									title: "错误",
									message: res.error.message
							});
					}
				})
			},
			// 表格信息
			getList(pageindex){
				const _this = this;
				_this.loading = true;
				let params = {};
                if(pageindex){
                    params = {
                        pageIndex : pageindex,
                        batchId:_this.id,
                        insuranceId:this.insuranceId,
                        pageSize:this.pagesizes,
                       // queryType : 0
                    }
                }else{
                    params = {
                        batchId:_this.id,
                        pageSize:3,
                       // queryType : 0,
                        pageSize:this.pagesizes,
                        insuranceId:this.insuranceId,
                    }
                }
				// console.log('====================');
				// console.log(params);
				this.post(params,'services/app/correctGuaranteeSlip/CorrectGetTempList_Upper').then(rs => {
					if(rs.success){
						console.log(rs);
						_this.loading = false;
						this.compomay=rs.result.insuranceName
						this.tableData = rs.result.items
						this.pagetotal=rs.result.totalCount
//						if(rs.result.guaranteeslipAllCount == 0){
//							this.btnShow = false;
//						}else{
//							this.btnShow = true;
//						}
//						let data = rs.result.items;
//						data.forEach(item => {
//							item.isshow = false;
//							if(item.remark == ''){
//								item.remark = rs.result.remark;
//							}
//						})
//						this.tableData = data;
//						// console.warn(this.tableData);
//						// console.warn('----------------------------//////////////////');
//						this.pagetotal= rs.result.totalCount ;
//						this.totalCost = rs.result.totalCost ;//应结
//						this.actionTotalCost = rs.result.actionTotalCost ; //实结
//						this.insuranceName  = rs.result.insuranceName  ; //保险公司
//						this.salesmanBeginDate = rs.result.salesmanBeginDate ; //开始时间
//						this.salesmanEndDate = rs.result.salesmanEndDate  ; //结束时间
//						this.remarkc = rs.result.remark; //备注
//						this.guaranteeslipAllCount  = rs.result.guaranteeslipAllCount ; //全部结算数量
//						this.settleCount = rs.result.settleCount ; //可以结算数量
//						this.noSettleCount = rs.result.noSettleCount ; //暂不结算数量
//					
					}
				})
			},
			//页码
		    handleCurrentChange(val){
		    	 
//		    	 this.currentPage = val;
//		    	 this.getList(val);
		    	 this.$router.push({
		    		name:"upperendorsement2",
		    		query:{
		    			pageindex:val,
		    			batchId:this.id,
                        insuranceId:this.insuranceId,
		    		}
		    	})
            },
            openRemark(val){
                this.remarkDialog = true;
                this.formLabel.gid = val.guaranteeSlipNumber;
                 this.formLabel.id = val.id;
                 Vue.set(this.formLabel,'remark',"")
            },
		    // 备注
		    saveremark(){
		    	this.$refs['formLabel'].validate((valid) => {
                    if(valid){
                        let params = {
                            id:this.formLabel.id,
                            remark :this.formLabel.remark
                        }
                        console.log(params);
                        this.post(params,'services/app/correctGuaranteeSlip/UpdateCorrectRemark').then(rs => {
                            if(rs.success){
                            	console.log(rs)
                            	   this.$notify({
                            	   	title: '成功',
						          message:'添加备注成功',
						          type: 'success'
						        });
                                this.remarkDialog = false;
                                //this.$refs['formLabel'].resetFields();
//                              if(rs.result.state == 0){
//                                  this.$notify({
//                                  title: '成功',
//                                  message: '保存成功',
//                                  type: 'success',
//                                  customClass:"el-notification-success"
//                                  });
//                              }
                               // this.getList(this.currentPage);
                            }
                        })
                    }
                })
            },
            quitRe(){
                this.remarkDialog = false;
                this.$refs['formLabel'].resetFields();
            },
		    // 政策批次
		    toD(id){
		    	let routeData = this.$router.resolve({
				   name: "policyupper3s",
				   query:{
		    			batchId:id
		    		}
				});
				window.open(routeData.href, '_blank');
		    },
		    // 附加
		    toA(id){
		    	this.$router.push({
		    		name:'approvalup',
		    		query:{
		    			batchId:id
		    		}
		    	})
		    },
		    // 备注
		    toR(id){
		    	this.$router.push({
		    		name:'approvalup',
		    		query:{
		    			batchId:id
		    		}
		    	})
            },
            // 删除
            del(val){
            	   this.$confirm('确定要删除该条批单吗', "确认", {
				        confirmButtonText: "确定",
				        cancelButtonText: "取消",
				        closeOnClickModal: false
				        // type: 'warning'
				      }).then(() => {
				        this.deletes(val)
				      });
//             this.$notify({
//                      title: '成功',
//                      message: '删除成功',
//                      type: 'success',
//                      });
            },
            //删除
            deletes(val){
            	let params={
            		id:val
            	}
            	this.post(params,"services/app/correctGuaranteeSlip/DeleteCorrect").then(res=>{
            		if(res.success){
            			if(this.$route.query.pageindex){
            				this.getList(this.$route.query.pageindex)
            			}else{
            				this.getList()
            			}
            			
              			 this.$notify({
	                        title: '成功',
	                        message: '删除成功',
	                        type: 'success',
	                       });
            		}else{
            			this.$notify.error({
					       title: "删除失败",
					        message: res.error.message,
					        duration: 0,
					        customClass: "el-notification-error"
					      });
            		}
            	})
            },
		    // 保单
		    toG(id){
		    	console.log(id)
		    	this.$router.push({
		    		name:'policydetail',
		    		params:{
		    			id:id
		    		}
		    	})
		    },
		    // 上一步
		    toupstep(){
		    	const _this = this;
		    	this.$confirm('返回上一步，该页面的操作将会重置，确定要返回上一步？').then(() => {
		            _this.$router.push({
		            	name:'upperendorsement1'
		            })
		        })
		    },
		    // 结算信息
		    tosettle(){
		    	this.dialogVisible = true;
		    	let params = {
		    		// id :'8b8e91dd-169c-4e22-9a69-a17976641a74'
		    		batchId:this.id
		    	}
		    	this.post(params,'services/app/correctGuaranteeSlip/CorrectImportInfo').then(rs =>{
		    		if(rs.success){
		    			this.isloading=false;
		    			this.settleTableData = rs.result;
		    		}
		    	})
		    },
		    // 结算
		    upsettle(){
		    	
		    	this.dialogVisible = false;
		    	const _this = this;
		    	let params = {
		    		// settlementBatchId :'8b8e91dd-169c-4e22-9a69-a17976641a74'
		    		batchId :this.id
		    	}
		    	this.post(params,'services/app/correctGuaranteeSlip/CorectSettlement_Upper').then(rs =>{
		    		if(rs.success){
		    			
		    			console.log(rs.result);
				    	this.$router.push({
				    		name:'upperendorsement3',
				    		query:{
				    			id:_this.id
				    		}
				    	})
		    		}else{
		    		
		    			this.$notify.error({
				          title: '错误',
				          message: rs.error.message,
				          customClass:"el-notification-error"
				        });
		    		}
		    	})
		    }
		}
	}
</script>
<style lang='scss' scoped>
.setFont{
	font-size:16px;
}
.acolor{
    color:#027DCA;
    cursor: pointer;
}
.bcolor{
    color:#cf1322;
    cursor: pointer;
}
.setWd{
	width:200px;
	display:inline-block;
}
.lineS:hover{
	color:#027DCA !important;
	cursor:pointer;
	border-bottom:1px solid #027DCA;
}
.noDou:first-child{
	display:none;
}
.lineG{
	color:#027DCA !important;
	cursor:pointer;
	min-width: 200px;
}
.setText{
	border-radius:5px;
	border-color:  #D9D9D9;
	height:60px;
	width:233px;
	padding:5px;
}
 textarea[class='setText']::-webkit-input-placeholder {
    color: #CBCBCB;
    font-size:13px;
}
.setR{
	color:#CF1322;
}
.wd100{
	width:100px;
}
.wd120{
	width:120px;
}
.setC{
	font-size:12px;
	p{
		padding:0;
		margin:0;
		line-height:18px;
		text-align:right;
	}
}
	.app-container{
		.upStream2{
			width:100%;
			.up-top{
				margin-top: 55px;padding: 0 20px;margin-bottom: 50px;
			}
			.up-info{
				padding:0 25px;
				margin-top:50px;
				.info-p1{
					font-size:16px;
					color:#333;
					line-height: 28px;
				}
				.info-p2{
					font-size: 12px;
					color:#666;
					line-height:17px;
					span{
						color: #40819E;
					}
				}
			}
			.up-list{
				width:100%;
				.list-tab{
					padding:0 20px;
					box-border:border;
					border-bottom: 1px solid #CBCBCB;
					.tab{
						display: inline-block;
						padding:0 10px;
						line-height:40px;
						text-align: center;
						color:#333;
						cursor:pointer;
						margin-bottom: -1px;
						span{
							color:#999;
						}
					}
					.now{
						color:#FF7819 !important;
						background: url(../../../assets/images/bomactive2x.png) center 32px no-repeat;
						span{
							color:#FF7819 !important;
						}
					}
				}
			    .list-all{
					padding:14px 20px;
					.all-search{
						display:inline-block;
					}
					.all-data{
						float:right;
						color:#666666;
						display:inline-block;
						span{
							font-size:13px;
							.data-red{
								color:#CF1322;
							}
						}
					}
				}
				.list-all2{
					height:56px;
					box-sizing:border-box;
					padding:14px 20px;
					.all-data2{
						float:right;
						color:#666666;
						display:inline-block;
						line-height:28px;
						span{
							font-size:13px;
							.data-red{
								color:#CF1322;
							}
						}
					}
				}
				.list-table{
					padding:0 20px;
					.lf,.md{
						width:30%;
						float:left;
						.title1{
							color:#40819E;
							font-size:14px;
							line-height:20px;
							margin:14px 0;
						}
						p{
							margin:10px 0;
							.firstSpan{
								display:inline-block;
								width:100px;
								color:#999999;
								font-size:13px;
								line-height: 18px;
							}
							span{
								color:#151515;
								font-size:13px;
								line-height: 18px;
							}
						}
						.divP{
							margin:10px 0;
							.firstSpan{
								display:inline-block;
								width:100px;
								color:#999999;
								font-size:13px;
							    line-height: 18px;
    							vertical-align: top;
							}
							span{
								color:#151515;
								font-size:13px;
								line-height: 18px;
							}
						}
					}
					.md{
						padding-left:7%;
						width:40%;
						border-right:1px solid #CBCBCB;
						border-left:1px solid #CBCBCB;
						p{
							span:first-child{
								display:inline-block;
								width:150px;
								color:#999999;
								font-size:13px;
							}
						}
					}
					.rh{
						margin-left:7%;
						width:23%;
						float:left;
						.title1{
							color:#40819E;
							font-size:14px;
							line-height:20px;
							margin:14px 0;
						}
						p{
							margin:10px 0;
							span:first-child{
								display:inline-block;
								width:150px;
								color:#999999;
								font-size:13px;
							}
							span{
								color:#151515;
							}
						}
					}
					.edspan1{
						display:inline-block;
						width:25px;
						height:25px;
						background:#39B96C;
						border-radius:6px;
						color:#fff;
						font-size:14px;
						text-align:center;
					}
					.edspan2{
						display:inline-block;
						width:25px;
						height:25px;
						background:#3C8CBD;
						border-radius:6px;
						color:#fff;
						font-size:14px;
						text-align:center;
					}
					.info-p1{
						font-size:13px;
						color:#333;
						line-height:18px;
						margin:0 0 3px 0;
						span:first-child{
							display:inline-block;
							min-width:190px;
						}
					}
					.info-p2{
						font-size:13px;
						color:#666;
						margin:3px 0 0 0;
						line-height:18px;
						display:inline-block;
						span:first-child{
							display:inline-block;
							min-width:100px;
						}
					}
					.info-p3{
						font-size:13px;
						color:#666;
						margin:3px 0 0 0;
						line-height:18px;
					}
					a{
						color:#027DCA
					}
				}
				.list-page{
					margin:30px 0 20px 0;
					text-align:right;
					padding:0 20px;
				}
			}
			.up-btn{
				text-align:center;
				margin-bottom:50px;
			}
			.settletable{
				border:1px solid #efefef;
				text-align:right;
				width:100%;
				margin-bottom:20px;
				.setB{
					font-weight:700;
				}
				td{
					border:1px solid #efefef;
				}
			}
		}
	}
	.Businessownership{
		cursor:pointer;
		text-align:center;
		span{
			display:block;
		}
	}
</style>